<template>
  <div class="df fdc jcc outer-padding">
    <p class="hh-64 boxs pdl-32 fl-center pointer" @click="$router.push('/data/schedule')">
      <icon-font type="icon-arrowleft"></icon-font>
      <span class="pdl-8">返回</span>
    </p>
    <div class="pdl-32">
      <p class="pdt-24 pdb-16 fs-18 font333 bold">预约情况</p>
      <div class="pdb-32">
        <a-button type="primary" @click="addStu">添加学生</a-button>
      </div>
      <dynamic-table ref="tableRef" :columns="find_columns" :get-list-func="loadData" rowKey="id">
        <template></template>
      </dynamic-table>
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, reactive, toRefs, ref, onMounted } from 'vue'
  import { DynamicTable, TableQueryHeader } from '@/components/dynamic-table'
  import { useRoute } from 'vue-router'
  import { useStore } from '@/store'
  import { getIndexList } from '@/api/listen'
  import { find_columns } from './columns'
  import { postDelById } from '@/api/system'
  import { IconFont } from '@/components/iconfont'
  import { useCreateModal } from '@/hooks'
  import AddStuModal from './components/add-stu-modal.vue'

  export default defineComponent({
    name: 'scheduleComponent',
    components: {
      DynamicTable,
      IconFont,
    },
    setup() {
      const tableRef = ref<InstanceType<typeof DynamicTable>>()

      const valueDate = ref<moment.Moment[]>([])

      const route = useRoute()

      const store = useStore()

      const state = reactive({
        queryParam: {
          account: null,
          scoreDay: null,
        },
        currTitle: 1,
        activeKey: 0,
      })

      /**
       * @description 加载表格数据
       */
      /**
       * @description 加载表格数据
       */
      const loadData = (params) => {
        const myParams = { ...params, ...state.queryParam }
        return getIndexList(myParams)
      }

      const onSearch = (ev) => {
        console.log(ev)
        state.queryParam.account = ev
        tableRef.value?.refreshTableData()
      }

      // 删除
      const del = async (ev) => {
        await postDelById({ id: ev })
      }

      const addStu = () => {
        useCreateModal(AddStuModal, {
          callback: () => {},
        })
      }

      return {
        ...toRefs(state),
        tableRef,
        valueDate,
        loadData,
        find_columns,
        onSearch,
        del,
        addStu,
      }
    },
  })
</script>
<style lang="scss" scoped>
  .flex-table {
    display: flex;
    align-items: center;
  }
</style>
